﻿@using DLULearningNetwork.ViewModels;
@{
    ViewBag.Title = "ChangeAvatar";
    Layout = "~/Views/Shared/FrontEndMasterLayout.cshtml";
    DLULearningNetworkModel.Account currentUser = DLULearningNetwork.ActionFilterAttributes.RequireUserLogin.LoginUser;
    string imgPath = ViewBag.ImageSource;
    WebImage wim = null;
    float ratio = 0;
    if (imgPath != "")
    {
        if (ViewBag.WebImage == null)
        {
            //imgPath = imgPath.Replace('/', '\\');
            wim = new WebImage(Server.MapPath(imgPath));
        }
        else
        {
            wim = ViewBag.WebImage;

        } ratio = (float)wim.Height / wim.Width;
    }
    
}

@section rightColumn{
    <div style="width: 730px;">
        <div>
            @using (Html.BeginForm("ChangeAvatar", "Profile", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {
                <input type="file" style="border: 1px solid green" name="fileAvatar" />
                <input type="submit" name="summit" value="Đăng hình" class="dlubtn" />
                
                <br />
            }
            @if (ViewBag.Error != null)
            {
                <div style="border: 1px solid red; background-color: #FBC7BE; color: Red;">@ViewBag.Error</div>
            }
        </div>
        <br />
        @if (wim != null)
        {
            <strong>Chỉnh sửa hình</strong><br />
            <div class="avatarEditBox">
                <div class="leftbox">
                    <div style="display: inline; height: 40px; border: 2px solid green; padding: 5px">
                        <input type="radio" name="sizeType" checked="checked" value="Large" /><strong>Hình lớn</strong>
                        <input type="radio" name="sizeType" value="Small" /><strong>Hình nhỏ</strong>
                        <input type="checkbox" name="usingAspectRatio" /><strong>Lấy theo tỉ lệ</strong>
                    </div>
                    <div class="imageEditorBox">
                        @*<input type="hidden" id="Top" value="" />
                        <input type="hidden" id="Right" value="" />
                        <input type="hidden" id="Button" value="" />
                        <input type="hidden" id="Left" value="" />*@
                        <img id="imageEditor" style="position:relative;" src="@Url.Content(ViewBag.ImageSource)" alt="" width="@wim.Width" style="margin:0 auto;" height="@wim.Height"/>
                    </div>
                </div>
                <div style="background-color:green;width:2px;"></div>
                <div class="rightbox">
                    <div style="display: inline; height: 40px; padding: 5px">
                        <a href="#" class="dlubtn" name="btnSave" onclick="return false;">Lưu</a>
                        <input type="hidden" name="ratio" value="@ratio"/>
                    </div>
                    <div style="overflow: hidden;">
                        <img id="imagePreview" src="@Url.Content(ViewBag.ImageSource)" alt="" />
                    </div>
                    <br />
                </div>
                <div style="clear: both;">
                </div>
            </div>
            <div style="clear: both;">
            </div>
        }
    </div>
    <div style="clear: both;">
    </div>
}
@section cssjs{
    <link href="../../Content/ButtonStyle.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/AvatarEditBox.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../Scripts/Custom/jquery.Jcrop.min.js"></script>
    <script type="text/javascript" src="../../Scripts/Custom/jsChangeAvatar.js"></script>
}
